iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

全端成長之旅系列 第 11

Day.11 Vue3 介紹 Part 6

  • 分享至 

  • xImage
  •  

今天介紹一些 v-model 在 v3 一些改動以及新特性

v-model 搭配 Computed 使用

這個範例只有在 Vue 3 的文件中出現
不過看起來 Vue 2 也可以用一樣的概念來處理相同邏輯。

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
})

v-model 的預設 prop 以及 event 名稱改變

Vue 3 前 v-model 是以下的簡寫

<MyInput :value="name" @input="newValue => this.name = name" />

Vue 3 後 v-model 是以下的簡寫

<MyInput :modelValue="name" @update:modelValue="newValue => this.name = name" />

移除 v-bind 的 .sync 修飾詞,改為配合參數使用的 v-model

Vue 2

<MyComponent :title.sync="pageTitle" />

Vue 3

<MyComponent v-model:title="pageTitle" />

雖說帶 syncProp 感覺跟 v-model 是同一個東西,所以我平常沒在用,
但也因為現在這個改動,使得原件可以同時綁定多個 v-model,如下:

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- would be shorthand for: -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

上一篇
Day.10 Vue3 介紹 Part 5
下一篇
Day.12 Vue3 介紹 Part 7
系列文
全端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
henrykhol
iT邦新手 5 級 ‧ 2022-11-01 19:08:41

請問一下,在Vue3之下

<MyInput :modelValue="name" @update:modelValue="newValue => this.name = name" />

modelValue 是否不能使用,要改成model-value?我自行測試時,會出現
[Vue warn]: Event "update:modelvalue" is emitted in component Child but the handler is registered for "update:modelValue". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates.
如Vue2官網所說,改成model-value後確實就能正常運行,不過Vue3官網好像沒說不行!!

我要留言

立即登入留言